<template>
  <div>
    <div class="section tab-con tab-menu-box active">
      <p class="tCenter tips">授课方式：线下试听</p>
      <ol class="course-menu-lists">
        <li v-for="item in courseMenus">
          <router-link :to="'/detail/'+item.courseId" @click="toDetail"><p>{{item.courseName}}</p><i class="icon-right"></i></router-link>
        </li>
      </ol>
      <p class="tCenter more-course" @click="addMore">点击加载更多</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Menu",
    data() {
      return {
        courseMenus: [/*
          {
            courseName: '社会主义核心价值观论',
            courseId: '0001'
          },
          {
            courseName: '三年高考五年模拟',
            courseId: '0002'
          },
          {
            courseName: '随便五个字',
            courseId: '0003'
          },
          {
            courseName: '很多很多字的课程名字放在这里会怎样呢不知道呢看看吧',
            courseId: '0004'
          },
          {
            courseName: 'testjkfsdkfshkfhksdhfksdhfksdlhflsfhslfhslfdkh',
            courseId: '0005'
          },*/
        ]
      }
    },
    created:function(){
      this.$axios({
        url: 'https://www.easy-mock.com/mock/5b0266d995118136368f1a78/'

      }).then((res) => {
        console.log(res);
        let data=res.data.data;
        data.forEach((val)=>{
          this.courseMenus.push({courseName: val.coursename, courseId: val.courseid})
        })
        //this.courseMenus.push({courseName: res.data.data.coursename, courseId: res.courseid})
        //this.courseMenus.push({courseName: 'aa', courseId: '0000000'})
      })
        .catch(() => alert('请求错误'))
    },
    methods: {
      addMore() {
        this.$axios({
          url: 'https://www.easy-mock.com/mock/5b0266d995118136368f1a78/'

        }).then((res) => {
          console.log(res);
          let data=res.data.data;
          data.forEach((val)=>{
            this.courseMenus.push({courseName: val.coursename, courseId: val.courseid})
          })
          //this.courseMenus.push({courseName: res.data.data.coursename, courseId: res.courseid})
          //this.courseMenus.push({courseName: 'aa', courseId: '0000000'})
        })
          .catch(() => alert('请求错误'))

      },
      toDetail:function(){

      }
    }
  }
</script>

<style scoped>
  .tab-con.active {
    display: block;
  }

  .tab-menu-box {
    background-color: #fff;
  }

  .tab-menu-box .tCenter.tips {
    font-size: .28rem;
    color: #9e9e9e;
    padding: .2rem 0 .25rem;
    border-bottom: 1px solid #e6e6e6
  }

  ol.course-menu-lists {
    counter-reset: sectioncounter;
    padding: 0 .2rem .2rem;
    border-bottom: 1px solid #e6e6e6
  }

  .course-menu-lists li a {
    padding: .2rem .15rem .2rem 0;
    font-size: .28rem;
    color: #333333;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
  }

  .course-menu-lists li a:active {
    background-color: #f5f5f5
  }

  .course-menu-lists li a:not(:last-of-type) {
    border-bottom: 1px solid #e6e6e6
  }

  .course-menu-lists li p {
    padding-right: .1rem;
    padding-left: .4rem;
    position: relative
  }

  .course-menu-lists li p:before {
    display: block;
    height: 100%;
    content: counter(sectioncounter);
    counter-increment: sectioncounter;
    padding-right: .15rem;
    position: absolute;
    top: .05rem;
    left: 0;
    text-align: right
  }

  .more-course {
    color: #32b16c;
    font-size: .26rem;
    padding: .26rem 0
  }

</style>
